<template>
  <div class="box">
  <router-view></router-view>

  <!-- 底部导航 -->
  <van-tabbar v-model="active" router replace v-if="route.meta.flag">
    <van-tabbar-item   icon="home-o" to="/home" >首页</van-tabbar-item>
    <van-tabbar-item   icon="shopping-cart-o" to="/goods">购物车</van-tabbar-item>

    <!-- 条件渲染,更具登录状态改变显示标签 -->
    <van-tabbar-item   icon="user-o" to="/login" v-if="!token">登录</van-tabbar-item>
    <van-tabbar-item   icon="user-o" to="/mine" v-if="token">我的</van-tabbar-item>
  </van-tabbar>
</div>
</template>

<script setup lang="ts">
import { ref,onMounted ,watch,unref} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useCounterStore } from "./stores/counter";
import { onBeforeRouteUpdate } from 'vue-router';
let route=useRoute();
let router =useRouter()
let counterStore = useCounterStore();
let token=ref<any>(null);
let active=ref<number>(0)
  onMounted(()=>{
    token.value=localStorage.getItem("token")
  })
 //侦听器解决导航标签样式与实际路由不匹配的问题
 onBeforeRouteUpdate((to:any)=>{
  if(to==="/login"){
      active.value=2
    }else if(to==="/home"){
      active.value=0
    }else if(to==="/goods"){
      active.value=1
    }
 })
//导航栏与路由同步
watch(()=>router.currentRoute.value.path,(ne,ol)=>{
  // console.log(ne,ol);
  if(ne==="/login"){
      active.value=2
    }else if(ne==="/home"){
      active.value=0
    }else if(ne==="/goods"){
      active.value=1
    }

},{immediate:true}

)
</script>

<style scoped>

</style>